<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title th:text="${userName}+' 打卡'"></title>
    <style>
        .attend-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        .table-header {
            background-color: #4CAF50;
            color: white;
        }

        .table-row:nth-child(even) {
            background-color: #f2f2f2;
        }

        th,
        td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: center;
            height: 50px;
            font-size: 20px;
        }

        .pagination {
            width: 100%;
            position: relative;
            bottom: 0;
            gap: 30px;
        }

        .prev-button,
        .next-button {
            width: 85px;
            height: 40px;
            border-radius: 10px;
            background-color: skyblue;
            color: white;
            border: none;
            cursor: pointer;
        }

        .prev-button:hover,
        .next-button:hover {
            background-color: skyblue;
        }
        .month-selector {
            border: none;
            cursor: pointer;
            font-size: 20px;
        }


        /* 媒体查询：手机屏幕（最大宽度 600px） */
        @media only screen and (max-width: 600px) {
            th,
            td {
                font-size: 16px;
                padding: 4px;
            }

            .attend-table {
                width: 100%;
            }

            .pagination {
                flex-direction: column;
                align-items: center;
                gap: 10px;
            }

            .prev-button,
            .next-button {
                width: 100%;
                height: 30px;
            }
        }
    </style>
</head>

<body>

<div th:fragment="attendance">
    <div>
        <form th:action="@{/attend/getClockList}" method="get" id = "clockList">
            <p style="display: flex; justify-content: space-between; margin-left: 20px; margin-right: 20px;font-size: 20px">
                <!--            <button th:onclick="'clock();'">今日打卡</button>-->
                <span>
                    <label>
                        <select name="month" onchange="submitMonth()" class="month-selector">
                            <option value=1 th:selected="${monthValue==1}">1 月</option>
                            <option value=2 th:selected="${monthValue==2}">2 月</option>
                            <option value=3 th:selected="${monthValue==3}">3 月</option>
                            <option value=4 th:selected="${monthValue==4}">4 月</option>
                            <option value=5 th:selected="${monthValue==5}">5 月</option>
                            <option value=6 th:selected="${monthValue==6}">6 月</option>
                            <option value=7 th:selected="${monthValue==7}">7 月</option>
                            <option value=8 th:selected="${monthValue==8}">8 月</option>
                            <option value=9 th:selected="${monthValue==9}">9 月</option>
                            <option value=10 th:selected="${monthValue==10}">10 月</option>
                            <option value=11 th:selected="${monthValue==11}">11 月</option>
                            <option value=12 th:selected="${monthValue==12}">12 月</option>
                        </select>
                    </label>
                </span>
                <span>本周：<span th:text="${data.weekTimeData}"></span></span>
                <span>本月：<span th:text="${data.monthTimeDate}"></span></span>
                <span>出勤：<span th:text="${data.attendDays}"></span>天</span>
                <span>加班：<span th:text="${data.latterDays}"></span>天</span>
                <span>月均剩余：<span th:text="${data.restAverageTime}"></span></span>
            </p>
            <table class="attend-table">
                <tr class="table-header">
                    <!--                <th>ID</th>-->
                    <!--                <th>name</th>-->
                    <th>date</th>
                    <th>upTime</th>
                    <th>downTime</th>
                    <th>additionLength</th>
                </tr>
                <tr th:each="item : ${data.attendList.records}" class="table-row">
                    <!--                <td th:text="${item.id}"></td>-->
                    <!--                <td th:text="${item.name}"></td>-->
                    <td th:text="${item.currentDateTime}"></td>
                    <td th:text="${item.clockUpTime}"></td>
                    <td th:text="${item.clockDownTime}"></td>
                    <td th:text="${item.additionTimeStr}"></td>
                </tr>
            </table>
            <div class="pagination" style="text-align: center">
                <input th:value="${userName}" name="userName" style="display: none">
                <p><span th:text="${data.attendList.current}"></span> | <span th:text="${data.attendList.total/data.attendList.size +1}"></span></p>
                <button th:if="${data.attendList.current>1}" class="prev-button" type="submit" name="page" th:value="${data.attendList.current -1}">上一页</button>
                <button th:if="${data.attendList.current<= data.attendList.total/data.attendList.size}" class="next-button" type="submit" name="page" th:value="${data.attendList.current +1}">下一页</button>
            </div>
        </form>
        <div style="text-align: center">
            <form th:action="@{/attend/clocktodo}" method="post" id = "clockForm">
                <div th:if="${estimatedTimeOfDismissal!=null}">
                    <span>打卡时间节点</span>
                    <span th:if="${estimatedTimeOfDismissal[0]!=null}" th:text="' ' + ${estimatedTimeOfDismissal[0] + ', '}"></span>
                    <span th:if="${estimatedTimeOfDismissal[1]!=null}" th:text="${estimatedTimeOfDismissal[1]}"></span>
                </div>
                <label>
                    <input type="text" id="userName" name="userName" th:value="${userName}"  style=" display:none">
                    <input type="datetime-local" id="datetimeInput" name="clockTime" style="width: 300px;height: 40px;border: 1px solid #ddd;padding: 8px; margin-top: 20px;margin-bottom: 20px;font-size: 25px;text-align: center;">
                </label>
                <br/>
                <label>
                    <button type="submit" id="submitBtn" th:text="${msg!=null?msg:'打卡'}" style="height: 300px;width: 300px;border-radius: 50%;background-color: #2bde32;color: white;border: none;font-size: 50px">打卡</button>
                </label>
            </form>
        </div>
    </div>
</div>

<script >
    var now = new Date();
    var year = now.getFullYear();
    var month = (now.getMonth() + 1).toString().padStart(2, '0');
    var day = now.getDate().toString().padStart(2, '0');
    var hours = now.getHours().toString().padStart(2, '0');
    var minutes = now.getMinutes().toString().padStart(2, '0');
    var seconds = now.getSeconds().toString().padStart(2, '0');

    var defaultValue = `${year}-${month}-${day}T${hours}:${minutes}:${seconds}`;
    document.getElementById('datetimeInput').value = defaultValue;
    // 获取提交按钮
    var submitBtn = document.getElementById('submitBtn');

    // 为提交按钮添加点击事件
    submitBtn.addEventListener('click', function(event) {
        event.preventDefault();  // 阻止表单默认提交行为

        // 显示确认弹窗
        var confirmResult = confirm('您指纹打卡了吗？');

        // 如果用户确认，提交表单
        if (confirmResult) {
            document.getElementById('clockForm').submit();
        }
    });
    function submitMonth() {
        document.getElementById('clockList').submit();
    }
</script>

</body>

</html>